<template>
  <van-action-sheet
    v-model:show="panelVisible"
    :close-on-click-overlay="false"
    style="max-height: 100%"
  >
    <div class="content">
      <div class="header">
        <div class="title">天天做任务赚翻租币</div>
        <div class="description">
          已获得 <span class="money">{{ money }}</span> 个金币，租币可兑换商品
        </div>
        <div class="close" @click="panelVisible = false">
          <van-icon name="close" size="24" />
        </div>
      </div>
      <div class="task-list">
        <div class="task-group" v-for="taskGroup in taskList" :key="taskGroup.category">
          <div class="task-group-name">{{ taskGroup.category }}</div>
          <div class="task-item" v-for="task in taskGroup.tasks">
            <div class="task-item-icon">
              <img :src="task.icon" alt="" />
            </div>
            <div class="task-item-title">{{ task.title }}</div>
            <div class="task-item-reward">
              <van-button class="reward" v-if="task.status === 0" round @click="getReward(task)"
                >+{{ task.reward }}租币</van-button
              >
              <van-button class="geted" v-else round> 已领取</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-action-sheet>
  <Toast ref="toastRef"></Toast>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Toast from '@/components/Toast.vue'
import task1 from '@/assets/image/task1.png'
import task2 from '@/assets/image/task2.png'
import task3 from '@/assets/image/task3.png'
import task4 from '@/assets/image/task4.png'

const panelVisible = ref(false)
const money = ref(3321)

interface TaskItem {
  title: string
  reward: number
  status: 0 | 1 // 0 未领取 1 已领取
  icon: string
}

interface TaskGroupItem {
  category: string
  tasks: TaskItem[]
}

const taskList: TaskGroupItem[] = [
  {
    category: '新人任务',
    tasks: [
      {
        title: '收藏人人租机小程序',
        reward: 30,
        status: 0,
        icon: task1
      },
      {
        title: '进行实名认证',
        reward: 50,
        status: 0,
        icon: task2
      }
    ]
  },
  {
    category: '每天逛逛',
    tasks: [
      {
        title: '逛一逛活动页',
        reward: 10,
        status: 0,
        icon: task4
      },
      {
        title: '逛一逛首页',
        reward: 10,
        status: 0,
        icon: task4
      },
      {
        title: '逛一逛生活号首页',
        reward: 10,
        status: 0,
        icon: task4
      },
      {
        title: '去分享',
        reward: 5,
        status: 0,
        icon: task3
      }
    ]
  }
]

const toastRef = ref<InstanceType<typeof Toast>>()

const getReward = (task: TaskItem) => {
  if (task.status === 1) return
  money.value += task.reward
  toastRef.value?.showToast({
    message: `恭喜获得${task.reward}个租币`,
    description: '任务完成',
    money: task.reward
  })
  task.status = 1
}

const show = () => {
  panelVisible.value = true
}

defineExpose({
  show
})
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 83px;
  background: linear-gradient(to top, #78d38e, #40cabe);
  text-align: center;
  color: #fff;
  position: relative;

  .title {
    font-size: 20px;
    padding: 18px 0 10px 0;
  }

  .description {
    .money {
      color: #f8f192;
    }
  }

  .close {
    position: absolute;
    top: 10px;
    right: 15px;
  }
}

.task-list {
  height: 85vh;
  background-color: #e9faf4;
  padding: 0 10px;

  .task-group {
    .task-group-name {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 2px;
      padding: 10px 0;
    }
    .task-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      margin-bottom: 10px;
      padding: 10px 10px;
      border-radius: 10px;
      box-sizing: border-box;

      .task-item-icon img {
        width: 50px;
      }

      .task-item-title {
        flex: 1;
        text-align: left;
        padding-left: 15px;
      }

      .task-item-reward {
        .reward {
          height: 30px;
          color: #eb8c26;
          border-color: #eb8c26;
        }
        .geted {
          height: 30px;
          color: #969696;
          border-color: #969696;
        }
      }
    }
  }
}
</style>
